<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
   <style type="text/css">
       *{ padding:0; margin:0;}
	   
	   
	    .layer1{}
	    .layer1-1{ height:50px; width:60%; color:#FFF; font-size:35px; font-family:youyuan; text-align:center; line-height:50px; background-color:#0F0F0F; float:left;}
		
    .a:link{ text-decoration: none;}
	.a:visited{ text-decoration: none; color:#FFF}


    #navigation{ color:#CCC;
	  
	  width:40%;
	height:50px;
	font-size:0.7em;
	text-align:center; 
	float:left;
}
	
	#navigation a{
	height:50px;
	width:25%;
	float:left;
	
	line-height:50px;
	color:#FFFFFF;
	background:#0F0F0F;
	
	text-decoration:none;
			
	
 }
    #navigation  a:hover{					
	background-color:#222;			
	color:#EB6F50;						
	border-bottom:2px solid #EA6346;
  }







    .layer2{
	height:600px;
	width: 100%;
	background-image: url(https://www.easyar.cn/assets/images/login_bg.jpg);
	background-position: center top;
} 
        .layer2-1{ height:30%; width:30%; position:absolute; top:15%; left:3%; padding:10% 0;}
		#dz{
	font-family: "Bauhaus 93";
	font-size: 24px;
	color: #FFF;
	font-weight: bold;
}

     #ar{ font-family:youyuan; font-size:24px; color:#FFF; font-weight:bold;}

        .layer2-2{ height:300px; width:30%; background-color:#FFF; border: thin solid #11131E; border-radius:20px;position:absolute;top:30%;left:60%;}
		
		

	
	 <nowiki>.divLogin{width:260px; height: auto; padding:8px; margin:0 auto; border:1px solid #aaf; border-radius:5px;}
  .divLogin>form>div{
	width: 70%;
	height: 20px;
	border: 1px solid #EBEBEB;
	border-radius: 5px;
	margin-top: 20px;
	margin-right: auto;
	margin-bottom: 20px;
	margin-left: auto;
	padding-top: 10px;
	padding-right: 5px;
	padding-bottom: 10px;
	padding-left: 5px;
}
  .divLeft{
	width: 10%;
	height: 30px;
	margin: 0;
	background-image: url(image/bg_v3.png);
	float: left;
}
  .divRight{
	width: 215px;
	height: 20px;
	float: left;
	font-size: 12pt;
	font-family: Calibri;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 5px;
	
}
  .divRight input{ height:20px; padding:0; margin:0; border:0; outline:none; font-size:9pt;}
  .boxShadowShow{ box-shadow:0 0 3px 0 #66f;  }
  .boxShadowNone{ box-shadow:0;  }
  #uname{width:140px;}
  #psd{width:220px;}
  #divLeft1{
	background-position: 50% 40%;
}
  #divLeft2{background-position:-175px -62px;}
  p{text-align:center;}
  
  .login{
	background: #EB6F50 0px -210px;
	width: 80%;
	height: 50px;
	border-radius: 10px;
	line-height: 50px;
	color: #FFF;
	font-size: 15px;
	font-weight: bold;
	font-family: youyuan;
}
  
  .cancel{ color:#EB6F50; font-family:heiti; text-align:right;}
  .cance2{
	color: #EB6F50;
	font-family: heiti;
	
	text-align: center;
	font-size:12px;
	text-decoration:none;
}
 .cance2 a{
	color: #E1470D;
	text-decoration:none;
}

.cance3{ color:#999; font-size:12px; font-family:heiti; text-align:center;}
  h3{font-size:17pt; font-family:youyuan; line-height:30px; text-align:center; color:#EB6F50; }
	
	
	
			
   .layer3{
	height: 80px;
	width: 100%;
	background-color: #131313;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}
	
    #db{ font-family:heiti; font-size:12px; color:#FFF; text-align:center; line-height:50px; font-weight:inherit;}
    #db a{ font-family:heiti; font-size:12px; color:#FFF; text-align:center; text-decoration:none;}
	#db a:hover{color:#CCC; text-decoration:none;}
	#zd{ font-family:heiti; font-size:12px; color:#FFF; text-align:center;  font-weight:inherit;line-height:10px;}
   </style>


</head>

<body>

 <div class="layer1">
   <div class="layer1-1">AR体验馆</div>
</div>


 <div id="navigation">
	<a class="a" href="#">关于AR</a>
	<a class="a" href="#">主要产品</a>
	<a class="a" href="#">开放平台</a>
	<a class="a" href="#">联系我们</a>
 </div>

<div class="layer2">

     <div class="layer2-1" id="dz"><img src="http://imglf4.nosdn.127.net/img/RnVUUGRQcVh4dVNObmRPRmFEbFlQcVFiWWVxL0l2aUMzSXdEcTJKSWhRTVJyUTJGcm9wYmFRPT0.png?=imageView&thumbnail=500x0&quality=96&stripmeta=0&type=jpg%7Cwatermark&type=2" width="600"/>
     <p id="ar">好用的全平台AR引擎</p> 
     
     
     </div>
 
     <div class="layer2-2">
       
         
         <br />
         
         <div class="divLogin">
  <h3>登录</h3>

  <form method="get">
    <div id="divOut1">
      <div class="divLeft" id="divLeft1"><img src="http://imglf4.nosdn.127.net/img/ZXh0alZZV29TL05SRWFsck9pR2tMaEZsZEFOOUY3dkJvZ1pCZTAzVVlvRHZBd1BwbFl1MFh3PT0.png?=imageView&amp;thumbnail=500x0&amp;quality=96&amp;stripmeta=0&amp;type=jpg%7Cwatermark&amp;type=2" width="20" height="20" /></div>
      <div class="divRight"><input type="text" id="uname" placeholder="邮箱或手机号" /></div>
    </div>
    <div id="divOut2">
      <div class="divLeft" id="divLeft2"><img src="http://imglf5.nosdn.127.net/img/ZXh0alZZV29TL05SRWFsck9pR2tMcERMeHhER01YcnA5QWNTeVVqWXBFT0xQWDZTd2VNVFZnPT0.png?=imageView&amp;thumbnail=500x0&amp;quality=96&amp;stripmeta=0&amp;type=jpg%7Cwatermark&amp;type=2" width="20" height="23" /></div>
       <div class="divRight"><input type="password" id="psd" placeholder="登录密码" /></div>
    </div>
    <p><input type="submit" value="登录" class="login" />
       </p>
    <br /> 
      <p class="cance2"><a href="#"><i class="cance3">忘记密码？&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</i>立即注册&gt;&gt;&gt;</a></p>
  </form>
  </div>
  </div>
</div>
 
   <div class="layer3" id="db">
       <a href="#">联系我们&nbsp;&nbsp;&nbsp;</a>|&nbsp;&nbsp;&nbsp;<a href="#">友情链接</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<a href="#">QQ群</a>
       <p id="zd">Copyright © 2012 - 2017 AR体验馆（上海）有限公司. All rights reserved. 沪ICP备12345678号</p>
   </div>
     
</body>
</html>
